<template>
    <view class="login">
        <view class="login-main">
            <view class="login-logo">
                <image src="../../static/img/logo.png" mode="scaleToFill"></image>
            </view>
            <view class="login-list flex border-all">
                <view class="iconfont iconfont-user flex"></view>
                <view class="login-input">
                    <input maxlength=" 11" placeholder="请输入账号" class="is-input1 " v-model="rempassobj.username" />
                </view>
            </view>
            <view class="login-list flex border-all">
                <view class="iconfont iconfont-pass flex"></view>
                <view class="login-input">
                    <input type="password" placeholder="请输入密码" class="is-input1" v-model="rempassobj.password" />
                </view>
                <!-- <view class="password-sx"></view> -->
                <!-- <view class="passwordimg" @click.stop="getpassword()">{{getpasswordText}}</view> -->
            </view>
            <checkbox-group class="block" @change="CheckboxChange">
                <view style="display: flex;align-items: center;padding-top: 20rpx;padding-left: 10rpx;">
                    <checkbox class='round' :class="checkbox[0].checked?'checked':''"
                        :checked="checkbox[0].checked?true:false" value="B"></checkbox>
                    <view class="title" style="padding-left: 10rpx;">记住密码</view>
                </view>
            </checkbox-group>
            <!-- <u-checkbox-group style="padding-top: 20rpx;padding-left: 10rpx;">
                <u-checkbox v-model="rempassobj.isrem" shape="circle" active-color="#5055a8" size="40"
                    @change="f_rempass">记住密码
                </u-checkbox>
            </u-checkbox-group> -->
            <div style="display: flex;width: 100%;height: 60rpx;justify-content: center;">
                <button class="cu-btn login-btn" @tap="doLogin">登 录</button>
            </div>
            <!-- <view class="login-tip">点击登录表示同意
                <navigator>软件许可及服务协议</navigator>
            </view> -->
        </view>
        <!-- <view class="login-footer">
            <view class="footer-tip flex">其他登录方式</view>
            <view class="footer-other flex">
                <view class="other-list">
                    <image src="../../static/ic-weixin@2x.png" mode="aspectFill" @tap="login_weixin()"></image>
                </view>
            </view>
        </view> -->
    </view>
</template>


<script>
    import { isnull } from '@/common/lib/fun.js'
    import md5 from '@/common/lib/md5.js'
    export default {
        data() {
            return {
                checkbox: [{
                    value: 'B',
                    checked: true
                }],
                rempassobj: {
                    isrem: false,
                    username: "",
                    password: '',
                },
                checked: false,
                form: {
                    username: "",
                    password: '',
                },

            }
        },
        onLoad() {
            var t = this
            t.$cfg.flag(false);
            t.rempassobj = t.$cfg.rempass()
            t.checkbox[0].checked = t.rempassobj.isrem
            // if(t.rempassobj.isrem){
            //     t.checkbox.value
            // }
        },
        methods: {
            CheckboxChange(e) {
                var t = this
                console.log(e.detail.value);
                var items = this.checkbox,
                    values = e.detail.value;
                if (values.length == 0) {
                    t.rempassobj.isrem = false
                } else {
                    t.rempassobj.isrem = true
                }
                if (isnull(t.rempassobj.username) != '' && isnull(t.rempassobj.password) != '') {
                    if (values.length > 0) {
                        var obj = {
                            isrem: true,
                            username: t.rempassobj.username,
                            password: t.rempassobj.password,
                        }
                        t.$cfg.rempass(obj)
                    } else {
                        uni.removeStorageSync('rempass');
                    }
                }
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    items[i].checked = false;
                    for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
                        if (items[i].value == values[j]) {
                            items[i].checked = true;
                            break
                        }
                    }
                }
            },
            // 选中某个单选框时，由radio时触发
            f_rempass(e) {
                var t = this
                if (isnull(t.rempassobj.username) != '' && isnull(t.rempassobj.password) != '') {
                    if (e.value) {
                        var obj = {
                            isrem: e.value,
                            username: t.rempassobj.username,
                            password: t.rempassobj.password,
                        }
                        t.$cfg.rempass(obj)
                    } else {
                        uni.removeStorageSync('rempass');
                    }
                }
                console.log(e);
            },

            doLogin() {
                let t = this;
                // uni.reLaunch({
                //     url: '/pages/index/index'
                // });
                // uni.hideKeyboard()
                //模板示例部分验证规则

                // if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.username))) {
                //     uni.showToast({ title: '请填写正确账号码', icon: "none" });
                //     return false;
                // }
                var yz = t.f.valid(t.rempassobj, {
                    username: {
                        kts: '请输入账号'
                    },
                    password: {
                        kts: '请输入密码'
                    }
                })
                if (yz) {
                    t.f.msg(yz);
                    return;
                } else {
                    var tt = t.rempassobj
                    if (tt.isrem) {
                        t.$cfg.rempass(tt)
                    }
                    var para = {
                        password: md5(t.rempassobj.password),
                        username: t.rempassobj.username
                    }
                    // console.log(para);
                    uni.showLoading({ mask: true })
                    // console.log(t.$cfg.commonurl + 'clientUser/login-client-sub');
                    // t.$api.req_common('clientUser/login-client-sub', para, 'form', false).then(res => {
                    //     console.log(res);
                    //     if (res.code === '1') {
                    //         t.$cfg.token(res.obj.token)
                    //         t.$cfg.user(res.obj.info)

                    //         uni.hideLoading();
                    //         t.f.msg('登录成功', 'success')
                    //         uni.switchTab({
                    //             url: '/pages/home/home'
                    //         });
                    //     } else {
                    //         uni.hideLoading();
                    //         uni.showToast({
                    //             title: res.data.message,
                    //             icon: 'none',
                    //             duration: 2000
                    //         });
                    //     }
                    // })
                    uni.request({
                        url: t.$cfg.commonurl + 'clientUser/login-client-sub',
                        data: para,
                        method: 'POST',
                        header: {
                            'content-type': 'application/x-www-form-urlencoded'//自定义请求头信息
                        },
                        success: (res) => {
                            console.log(res);
                            if (res.data.code === '1') {
                                t.$cfg.token(res.data.obj.token)
                                t.$cfg.user(res.data.obj.info)
                                t.$cfg.userlist(res.data.obj.list)
                                // uni.setStorage({
                                //     key: 'token',
                                //     data: res.data.obj.token
                                // })
                                uni.hideLoading();
                                t.$api.req_post('/staff_grow/staff/stLoginMsg/addLoginMsg', { loginFrom: 'mt', loginIp: '192.168.1.1' }, 'form', false).then(res => {

                                })
                                t.f.msg('登录成功', 'success')
                                t.f.nav('/pages/home/home', 'R')

                            } else {
                                uni.hideLoading();
                                uni.showToast({
                                    title: res.data.message,
                                    icon: 'none',
                                    duration: 2000
                                });
                            }
                        },
                        fail: (fa) => {
                            console.log(fa);
                        }
                    });
                }
            },
        }
    }
</script>



<style lang="scss">
    .uni-checkbox-input {
        background-color: #1aad18 !important;
        border-color: #1aad18 !important;
        color: #ffffff !important;
    }

    page {
        background-color: #FFFFFF;

    }

    .flex {
        display: flex;
    }

    .login {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .login-main {
        flex: 1;
        padding: 0 70upx;

        .login-logo {
            width: 228upx;
            height: 228upx;
            // padding-bottom: 50upx;
            margin: 200upx auto 0 auto;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .logo-tip {
            text-align: center;
            padding-top: 25upx;
            font-size: 32upx;
            font-weight: 200;
            color: rgba(51, 51, 51, 1);
            padding-bottom: 50upx;
        }

        .login-list {
            margin-top: 35upx;
            height: 100upx;
            align-items: center;
            padding: 0 30upx;

            &.border-all {
                &:after {
                    border: 1px solid #D0D0D0;
                    border-radius: 100upx;
                }
            }

            .iconfont {
                width: 65upx;
                font-size: 46upx;
                color: #999999;
                align-items: center;

                &:after {
                    margin-left: 20upx;
                    content: '';
                    width: 2upx;
                    height: 35upx;
                    background: #D0D0D0;
                    display: block;
                }
            }

            .login-input {
                flex: 1;

                input {
                    font-size: 28upx;
                    color: #333333;
                    padding-left: 20upx;
                }
            }

            .password-sx {
                content: '';
                width: 2upx;
                height: 25upx;
                background: #D0D0D0;
                margin-right: 25upx;
            }

            .passwordimg {
                font-size: 24upx;
                color: #999999;
            }
        }

        .login-btn {
            margin-top: 200rpx;
            height: 60upx;
            width: 80%;

            background: #1aad18;
            /* background: linear-gradient(-90deg, rgba(80, 85, 168, 1), rgba(104, 110, 210, 1)); */
            border-radius: 47upx;
            font-size: 34upx;
            color: #fff;
        }

        .login-tip {
            padding-top: 26upx;
            font-size: 22upx;
            color: #666666;
            text-align: center;

            navigator {
                margin-left: 10upx;
                display: inline-block;
                color: #5055A8;
            }
        }
    }

    .login-footer {
        padding: 0 70upx;

        .footer-tip {
            align-items: center;
            font-size: 24upx;
            color: #999999;
            text-align: center;

            &:before {
                flex: 1;
                content: '';
                height: 2upx;
                background: #D0D0D0;
                margin-right: 30upx;
            }

            &:after {
                margin-left: 30upx;
                flex: 1;
                content: '';
                height: 2upx;
                background: #D0D0D0;
            }

        }

        .footer-other {
            padding: 40upx 0 100upx 0;
            justify-content: center;

            .other-list {
                width: 80upx;
                height: 80upx;
                margin: 0 75upx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>